<template>
    <el-container class="include-container">
        <div class="card-wrap">
            <div class="card-list-header">
                <span class="card-title">账号管理</span>
                <div class="page-right">
                      <auth-router-link :to="{path:'/user/detail',query:{id:0}}" type="primary" size="small" text="添加" :route_name="'/user/detail'"></auth-router-link>
                </div>
            </div>
            <div class="search-data">
                <div class="card-body">
                <el-form :inline="true" :model="searchForm" size="small" class="demo-form-inline">
                    <span class="total_length">
                        <el-form-item label="账号">
                            <el-input v-model="searchForm.username"  placeholder="账号" size="small" class="input_length" clearable></el-input>
                        </el-form-item>
                    </span>
                    <span class="total_length">
                        <el-form-item label="姓名">
                            <el-input v-model="searchForm.name" placeholder="姓名" size="small" class="input_length" clearable></el-input>
                        </el-form-item>
                    </span>
                    <el-form-item>
                    <el-button type="primary" @click="getData"  size="small">搜索</el-button>
                    </el-form-item>
                </el-form>
                </div>
            </div>
            <div style="width: 100%;border-bottom: 10px solid #F4F4F4;"></div>
            <div class="card-body-blank list-data-table">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="ID" label="ID" width="100" align="center" />
                    <el-table-column prop="userName" label="账号" width="220" align="center" />
                    <el-table-column prop="name" label="用户名" width="200" align="center" />
                    <el-table-column label="角色" width="200" prop="role_name" align="center">
                        <template #default="scope">
                            <span>{{scope.row.role.name}}</span>
                        </template>
                    </el-table-column> 
                    <el-table-column prop="mobile" label="手机号" width="180" align="center" />
                    <el-table-column prop="create_time" width="200" align="center" label="创建时间" >
                        <template #default="scope">
                            {{ formatDate(scope.row.create_time) }}
                          </template>
                    </el-table-column>
                    <el-table-column
                    label="操作"
                    width="250"
                    align="center">
                        <template #default="scope">
                            <auth-router-link :to="{path:'/user/detail',query:{id:scope.row.ID}}" size="small" text="编辑" :route_name="'/user/detail'"></auth-router-link>
                            <auth-button @click="deleteData(scope.row.ID)" type="default" size="small" text="删除" :route_name="'/sys/user/deleteUser'"></auth-button>
                          </template>
                </el-table-column>
                </el-table>
            </div>
            <div class="card-footer">
                <div class="page-right">
                    <el-pagination
                        small
                        background
                        @current-change="getData"
                        layout="prev, pager, next"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
            <div style="height:120px"></div>
        </div>
    </el-container>
</template>

<script setup>
    import AuthRouterLink from "../../components/AuthRouterLink.vue"
    import AuthButton from "../../components/AuthButton.vue"
    import { ref, reactive } from 'vue'
    import { getUserList,deleteUser } from "~/api/user"
    import { toast } from "~/composables/util"
    import { useRouter } from "vue-router"
    import { useStore } from "vuex"
    const router = useRouter()
    const store = useStore()
   
    const searchForm = reactive({
        name: "",
        username: ""
    })

    // 分页
    const currentPage = ref(1)
    const total = ref(0)
    const limit = ref(10)
    const tableData = ref([])
    const loading = ref(false)
     // 获取数据
    function getData(p = null) {
        if (typeof p == "number") {
            currentPage.value = p
        }

        loading.value = true
        getUserList(currentPage.value, 10,searchForm.name,searchForm.username)
            .then(res => {
                if(res.code == 200){
                    tableData.value = res.data.list
                    total.value = res.data.total
                }else{
                    toast(res.msg,'error')
                }
            })
            .finally(() => {
                loading.value = false
            })
    }
    getData()

    function formatDate(time) {
        const date = new Date(time * 1000);
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加一，并且补零
        const day = String(date.getDate()).padStart(2, '0');
        const hour = String(date.getHours()).padStart(2, '0');
        const minute = String(date.getMinutes()).padStart(2, '0');
        const second = String(date.getSeconds()).padStart(2, '0');
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    }

    function deleteData(value) {
        deleteUser(value)
        .then(res => {
            if (res.code == 200) {
                toast(res.msg)
                getData();
            } else {
                toast(res.msg, 'error')
            }
        })
    }

    //跳转
    function handleEdit(){
        router.push("./detail")
    }

</script>